<template>
	<view class="register-container">
		<!-- 顶部装饰 -->
		<view class="top-decoration"></view>

		<!-- 注册表单区域 -->
		<view class="form-container">
			<!-- 标题 -->
			<view class="title-group">
				<text class="main-title">欢迎加入</text>
				<text class="sub-title">请填写您的注册信息</text>
			</view>

			<!-- 注册表单 -->
			<view class="register-form">
				<!-- 手机号输入 -->
				<view class="input-item">
					<u-input v-model="phone" placeholder="请输入手机号" placeholder-class="placeholder" :border="false"
						clearable maxlength="11" type="number">
						<template v-slot:prefix>
							<u-icon name="phone" color="#4a90e2" size="20"></u-icon>
						</template>
					</u-input>
					<view class="divider"></view>
				</view>

				<!-- 验证码输入 -->
				<view class="input-item code-input">
					<u-input v-model="code" placeholder="请输入验证码" placeholder-class="placeholder" :border="false"
						clearable maxlength="6" type="number">
						<template v-slot:prefix>
							<u-icon name="chat" color="#4a90e2" size="20"></u-icon>
						</template>
						<template v-slot:suffix>
							<button class="get-code-btn" :disabled="countdown > 0 || !validatePhone()"
								@click.stop="sendCode">
								{{ countdown > 0 ? `${countdown}s后重试` : '获取验证码' }}
							</button>
						</template>
					</u-input>
					<view class="divider"></view>
				</view>

				<!-- 公司全称 -->
				<view class="input-item">
					<u-input v-model="companyName" placeholder="请输入公司全称" placeholder-class="placeholder" :border="false"
						clearable type="text">
						<template v-slot:prefix>
							<u-icon name="account-fill" color="#4a90e2" size="20"></u-icon>
						</template>
					</u-input>
					<view class="divider"></view>
				</view>

				<!-- 公司编码（选填） -->
				<view class="input-item">
					<u-input v-model="companyCode" placeholder="请输入公司编码（选填）" placeholder-class="placeholder"
						:border="false" clearable type="text">
						<template v-slot:prefix>
							<u-icon name="file-text" color="#4a90e2" size="20"></u-icon>
						</template>
					</u-input>
					<view class="divider"></view>
				</view>

				<!-- 姓名 -->
				<view class="input-item">
					<u-input v-model="name" placeholder="请输入您的姓名" placeholder-class="placeholder" :border="false"
						clearable type="text">
						<template v-slot:prefix>
							<u-icon name="account" color="#4a90e2" size="20"></u-icon>
						</template>
					</u-input>
					<view class="divider"></view>
				</view>

				<!-- 员工工号（选填） -->
				<view class="input-item">
					<u-input v-model="employeeId" placeholder="请输入员工工号（选填）" placeholder-class="placeholder"
						:border="false" clearable type="text">
						<template v-slot:prefix>
							<u-icon name="idcard" color="#4a90e2" size="20"></u-icon>
						</template>
					</u-input>
					<view class="divider"></view>
				</view>

				<!-- 注册按钮 -->
				<button class="register-btn" :disabled="!canRegister" @click="handleRegister" :loading="loading">
					<text>注册</text>
				</button>

				<!-- 已有账号登录 -->
				<view class="login-link" @click="handleLogin">
					<text>已有账号？去登录</text>
				</view>
			</view>
		</view>

		<!-- 底部协议 -->
		<view class="agreement">
			<text class="agreement-text">
				注册即代表您已阅读并同意
				<text class="agreement-link" @click="goyinsi">《用户须知》</text>
			</text>
		</view>

		<!-- 底部装饰 -->
		<view class="bottom-decoration"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				code: '',
				companyName: '',
				companyCode: '',
				name: '',
				employeeId: '',
				loading: false,
				countdown: 0,
				timer: null
			}
		},
		computed: {
			canRegister() {
				return (
					this.phone.length === 11 &&
					this.code.length >= 4 &&
					this.companyName.length > 0 &&
					this.name.length > 0
				)
			}
		},
		methods: {
			// 验证手机号格式
			validatePhone() {
				const reg = /^1[3-9]\d{9}$/
				return reg.test(this.phone)
			},

			// 发送验证码
			async sendCode() {
				if (!this.validatePhone()) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}

				if (this.timer) return

				this.loading = true
				try {
					// 这里应该是发送验证码的API调用
					// await sendSmsCodeApi(this.phone)

					// 模拟发送验证码
					uni.showToast({
						title: '验证码已发送',
						icon: 'success'
					})

					this.countdown = 60
					this.timer = setInterval(() => {
						if (this.countdown <= 1) {
							clearInterval(this.timer)
							this.timer = null
							this.countdown = 0
							return
						}
						this.countdown--
					}, 1000)
				} catch (error) {
					console.error('发送验证码失败:', error)
					uni.showToast({
						title: '发送验证码失败',
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			},

			async handleRegister() {
				if (!this.canRegister) return

				this.loading = true
				try {
					const params = {
						phone: this.phone,
						code: this.code,
						companyName: this.companyName,
						companyCode: this.companyCode,
						name: this.name,
						employeeId: this.employeeId
					}

					// 这里替换为实际的注册API调用
					// const res = await registerApi(params)

					// 模拟API调用
					await new Promise(resolve => setTimeout(resolve, 1000))

					uni.setStorageSync('userid', '123456')
					uni.showToast({
						title: '注册成功',
						icon: 'success'
					})

					// 注册成功后跳转到登录页或首页
					uni.navigateTo({
						url: '/pages/login/login'
					})
				} catch (error) {
					console.error('注册失败:', error)
					uni.showToast({
						title: '注册失败，请重试',
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			},

			handleLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},

			goyinsi() {
				uni.navigateTo({
					url: '/pages/login/yinsi'
				})
			}
		},

		beforeDestroy() {
			if (this.timer) {
				clearInterval(this.timer)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.register-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background: linear-gradient(135deg, #f0f9ff 0%, #e6f4ff 100%);
		position: relative;
		overflow: hidden;

		.top-decoration,
		.bottom-decoration {
			position: absolute;
			width: 100%;
			height: 200px;
			background: linear-gradient(135deg, #4a90e2 0%, #678FCD 100%);
			z-index: 0;
		}

		.top-decoration {
			top: 0;
			left: 0;
			border-bottom-left-radius: 50%;
			border-bottom-right-radius: 50%;
		}

		.bottom-decoration {
			bottom: 0;
			left: 0;
			border-top-left-radius: 50%;
			border-top-right-radius: 50%;
		}
	}

	.form-container {
		position: relative;
		z-index: 1;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 40rpx;
		margin-top: -100px;
		margin-bottom: -100px;
	}

	.title-group {
		margin-bottom: 40rpx;
		text-align: center;

		.main-title {
			display: block;
			font-size: 44rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 10rpx;
		}

		.sub-title {
			font-size: 28rpx;
			color: #999;
		}
	}

	.register-form {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 40rpx;
		box-shadow: 0 10rpx 30rpx rgba(74, 144, 226, 0.1);
	}

	.input-item {
		position: relative;
		margin-bottom: 40rpx;

		.divider {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 2rpx;
			background-color: #f0f9ff;
			transform: scaleY(0.5);
		}
	}

	.code-input {
		.u-input {
			display: flex;
			align-items: center;
		}

		.get-code-btn {
			background: none;
			border: none;
			color: #4a90e2;
			font-size: 26rpx;
			padding: 0;
			margin: 0;
			line-height: 1;

			&[disabled] {
				color: #ccc;
			}
		}
	}

	.placeholder {
		color: #ccc;
		font-size: 28rpx;
	}

	.register-btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		background: linear-gradient(135deg, #4a90e2 0%, #678FCD 100%);
		color: #fff;
		font-size: 32rpx;
		border-radius: 45rpx;
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		&[disabled] {
			background: #ccc;
			opacity: 0.7;
		}
	}

	.login-link {
		text-align: center;
		margin-top: 30rpx;

		text {
			color: #4a90e2;
			font-size: 26rpx;
		}
	}

	.agreement {
		position: absolute;
		bottom: 60rpx;
		left: 0;
		right: 0;
		text-align: center;
		padding: 0 40rpx;
		z-index: 1;

		.agreement-text {
			font-size: 24rpx;
			color: #333;
			line-height: 1.5;
		}

		.agreement-link {
			color: #fff;
		}
	}

	/* 动画效果 */
	.input-item {
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.98);
		}
	}

	.register-btn {
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.98);
			opacity: 0.9;
		}
	}
</style>